<template>
	<view class="order">

		<view class="title">
			<view :class="navIndex==index?'item_active':'item'" v-for="(item,index) in navList" :key="index"
				@click="navClick(index)">{{item}}</view>
		</view>

		<view class="content" v-if="navIndex==0">
			<block v-if="orderList.length>0">
				<view class="item" v-for="(item,index) in orderList" :key="index">
					<view class="item_box">
						<view class="item_top">
							<view class="left">
								{{item.sourceName}}
							</view>
							<view class="right" v-if="item.status==1">
								待消费
							</view>
							<view class="right" v-if="item.status==2">
								已使用
							</view>
							<view class="right" v-if="item.status==4">
								已退款
							</view>

							<!-- status:[1,2,3,4],//1 支付未使用  2使用了  3退款  4评价完成 -->
						</view>
						<view class="item_bottom">
							<image class="left" :src="item.goodsImg"></image>
							<view class="right">
								<view class="view1">
									下单时间：{{item.createTime}}
								</view>
								<view class="view1">
									有效期至：{{item.expireTime}}
								</view>
								<view class="view1">
									数量：{{item.amount}}
								</view>
								<view class="view1">
									实付：￥{{item.price}}
								</view>
								<view class="btnck" @click="jumpDetil(item.sourceId)">
									查看商户
								</view>
								<view class="btn" @click="linkPage('voucherCode',item.id)" v-if="item.status==1">
									查看券码
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="isBottom" v-if="isLastPage">
				没有更多团购订单了，快去屯一些优惠券吧
			</view>
			<view class="item_kong" v-if="orderList.length==0">
				<image class="kong_img" src="../../static/order_kong.jpg"></image>
				<view class="kong_text">
					呜呜，你暂时还没有订单，还没发现海量的吃喝玩乐优惠
				</view>
			</view>
		</view>

		<view class="content" v-if="navIndex==1||navIndex==2">
			<block v-if="orderList.length>0">
				<view class="item" v-for="(item,index) in orderList" :key="index">
					<view class="item_box">
						<view class="item_top">
							<view class="left">
								{{item.sourceName}}
							</view>
							<view class="right" v-if="item.status==0">
								待消费
							</view>
							<view class="right" v-if="item.status==1">
								已使用
							</view>
							<!-- <view class="right" v-if="item.status==3">
	 					 	已退款
	 					 </view> -->
						</view>
						<view class="item_bottom">
							<image class="left" :src="item.goodsImg"></image>
							<view class="right">
								<view class="view1">
									下单时间：{{item.createTime}}
								</view>

								<!-- <view class="view1" >
	 							有效期至：{{item.expireTime}}
	 						</view>	 -->

								<view class="view1">
									数量：{{item.amount}}
								</view>
								<view class="view1" v-if="navIndex==0||navIndex==1">
									实付：￥{{item.price}}
								</view>

								<view class="view1" v-if="navIndex==2">
									实付：{{item.price}}积分
								</view>
							</view>
						</view>
						<view class="item_foot" v-if="navIndex==2&&item.status==0">
							<view class="btn1" @click="selfUse(item.id,index)">
								查看免单
							</view>
							<view class="btn2" @click="linkPage('resell',item.id)">
								我要转卖
							</view>
							<view class="btn3" @click="sendFriend(item.id)">
								送给朋友
							</view>
						</view>
						<view class="item_foot" v-if="navIndex==2&&item.status==1">
							<!-- <view class="btn1">
					 	  	查看详情
					 	  </view> -->
						</view>
					</view>
				</view>
			</block>
			<view class="isBottom" v-if="isLastPage">
				没有更多积分订单了
			</view>
			<view class="item_kong" v-if="orderList.length==0">
				<image class="kong_img" src="../../static/order_kong.jpg"></image>
				<view class="kong_text">
					呜呜，你暂时还没有订单，还没发现海量的吃喝玩乐优惠
				</view>
			</view>
		</view>

		<!-- <view class="content" v-if="navIndex==3">
			<block v-if="orderList.length>0">
				<view class="item" v-for="(item,index) in orderList" :key="index">
					<view class="item_box">
						<view class="item_top">
							<view class="left">
								{{item.goodsName}}
							</view>
						</view>
						<view class="item_bottom">
							<image class="left" :src="item.sourceImg"></image>
							<view class="right">
								<view class="view1">
									下单时间：{{item.createTime}}
								</view>
								<view class="view1">
									数量：{{item.amount}}
								</view>
								<view class="view1">
									实付：￥{{item.price}}
								</view>
								<view class="btn" @click="jumpPageC(item.orderNo)">
									查看券码
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="isBottom" v-if="isLastPage">
				没有更多品牌订单了，快去屯一些优惠券吧
			</view>
			<view class="item_kong" v-if="orderList.length==0">
				<image class="kong_img" src="../../static/order_kong.jpg"></image>
				<view class="kong_text">
					呜呜，你暂时还没有订单，还没发现海量的吃喝玩乐优惠
				</view>
			</view>
		</view> -->

		<view class="bottom" v-if="navIndex==3">
			<view class="item" v-for="(item,index) in orderList" :key="index">
				<image :src="item.goodsImg" :class="item.isDateType==1?'item_left':'item_left filterAll'"
					mode="aspectFill"></image>
				<view :class="item.isDateType==1?'item_right':'item_right filterAll'">
					<view class="view1">
						{{item.goodsName}}
					</view>
					<view class="view2" v-if="item.isActive">
						过期时间：{{item.expireTime}}
					</view>
					<view class="view2" v-if="!item.isActive">
						过期时间：还未激活，激活后请在当天使用
					</view>
					<view class="view3">
						来源：{{item.isBuy?'购买系卡券':'赠送系卡券'}}
					</view>
				</view>
				<view :class="item.isDateType==1?'dw':'dw filterAll'" @click="jumpPageC(item.orderNo,item.isActive)">
					去<text v-if="!item.isActive">激活</text>使用
				</view>
				<image src="https://imgs.ynz666.com/test/2023/07/04/YjUwN2ZkNzdjYmJlNmI4MjM5Nzc3OGRlMDc2MjBmYjU=.png"
					class="dw_bj" wx:if="item.isActive" v-if="item.isDateType==2"></image>

			</view>
		</view>

		<view class="content" v-if="navIndex==4">
			<block v-if="orderList.length>0">
				<view class="item" v-for="(item,index) in orderList" :key="index">
					<view class="item_box">
						<view class="item_top">
							<view class="left">
								{{item.storeName}}
							</view>
							<!-- <view class="right">
								已使用
							</view> -->
						</view>
						<view class="item_bottom">
							<image class="left" :src="item.storeImg"></image>
							<view class="right">
								<view class="view1">
									买单时间：{{item.createTime}}
								</view>
								<view class="view1">
									实付：￥{{item.amount?item.amount/100:0}}
								</view>
								<view class="view1">
									红包优惠：￥{{item.useRedPacket?item.useRedPacket/100:0}}
								</view>
								<view class="btn" @click="jumpPageD(item.orderId)" v-if="item.isGoods">
									查看券码
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="isBottom" v-if="isLastPage">
				没有更多买单订单了
			</view>
			<view class="item_kong" v-if="orderList.length==0">
				<image class="kong_img" src="../../static/order_kong.jpg"></image>
				<view class="kong_text">
					呜呜，你暂时还没有订单，还没发现海量的吃喝玩乐优惠
				</view>
			</view>
		</view>

		<!-- 弹窗提示 -->
		<view class="mask" v-if="modalFlag" @click.stop="closeModal">
			<view class="nomral-modal">
				<view class="bg-top left"></view>
				<view class="bg-top right"></view>
				<block>
					<image src="https://imgs.ynz666.com/xiuxian/nomral_modal.png" mode="aspectFill"></image>
					<view class="nomral-txt">当前卡券激活后请在当天内去使用，过期则无法使用</view>
					<view class="modal-btn nomral-btn" @tap.stop="activate">去激活吧</view>
					<view class="nomral-tip">暂不激活</view>
				</block>
			</view>
		</view>


		<!-- 送朋友弹框 -->
		<view class="mask" v-if="friendModal">
			<view class="friendModal_box">
				<view class="top">
					<image class="img"
						src="https://imgs.ynz666.com/test/2023/11/28/YmY1NzQ2YjY1NTVjNjFlNDI0NDYxNThhMTA3MmVkZDM=.png">
					</image>
				</view>
				<view class="bot">
					<view class="bot_left">
						推荐免单商家
					</view>
					<view class="bot_right" @click="jumpSearch">
						{{sendStore.name}} >
					</view>
				</view>
				<view class="fot">
					<view class="btn1" @click="cancelModal">
						取消
					</view>
					<view class="btn2" @click="verifyModal">
						
						<view class="view1">
							分享
						</view>	
						<button open-type="share" class="btn_sha"></button>
					</view>
				</view>
			</view>
		</view>


		<customTabbar :curNav="3" :bottomTabbar='bottomTabbar' :saleView='mineInfo.saleView'></customTabbar>
	</view>
</template>


<script>
	var app = getApp();
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import http from '@/utils/request/http.js';
	import {
		orderGoodsList,
		productOrderuse,
		getOrderWikeList,
		getOrderuserList,
		apiEsStoreList
	} from '../../apis/index.js';
	import gongType from '@/utils/debounce.js'
	export default {
		data() {
			return {
				navList: ['团购订单', "转卖订单", "积分订单", "卡券订单", "买单订单"],
				navIndex: 0,
				goodsType: [4],

				currentPage: 1,
				pageSize: 10,
				isLastPage: false,
				orderList: [],

				bottomTabbar: 0,
				mineInfo: {},

				modalFlag: false,
				orderCouponId: '',

				friendModal: false,
				sendStore: {
					name:'默认商家'
				}, //选择的商家
				
				orderId:'',//点击送给朋友 保存的订单ID
			}
		},
		components: {
			customTabbar
		},
		onLoad(options) {
      this.getStoreList();
		},
		onReady() {
			uni.hideTabBar();
		},
		onShow() {
			uni.hideTabBar();
			let that = this
			
			
			uni.$on('isRefresh', function(data) {
				// TODO 下面执行刷新的方法
				console.log(data, "data")
				that.sendStore = data
			})

			console.log(app.globalData.orderType, "app.globalData.orderType")
			if (app.globalData.orderType == 2) {
				this.navIndex = 2
				this.goodsType = [-1]
			}

			if (app.globalData.orderType == 3 || app.globalData.orderType == 4) {
				this.navIndex = app.globalData.orderType
			}
			this.currentPage = 1;
			this.orderList = [];
			this.isLastPage = false
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.getUserInfo();
			this.getList();
			
			
		},
		onReachBottom() {
			console.log("cf")
			if (!this.isLastPage) {
				this.currentPage++;
				this.getList();
			}
		},
		onPullDownRefresh() {
			let that = this;
			uni.showToast({
				title: '刷新中',
				icon: "loading",
				mask: true
			})
			setTimeout(() => {
				that.currentPage = 1;
				that.isLastPage = false;
				that.getList();
				uni.hideNavigationBarLoading() //完成停止加载
				uni.stopPullDownRefresh() //停止下拉刷新
				uni.hideToast();
			}, 1500);
		},
		onShareAppMessage(res) {
			if (res.from = 'button') {
				return {
					title: '朋友送你多张免单券',
					imageUrl: 'https://imgs.ynz666.com/test/2023/11/28/Y2I3ZDFmZWRmZjViZDBiZTYzZjY5ODcyMmM2MGZmOTM=.png',
					path: `/pages/storeDetail/storeDetail?store_id=${this.sendStore.id}&order_id=${this.orderId}`
				}
			}
		},
		methods: {
			getStoreList() {
				var that = this;
			
				let local = app.globalData.latitude + "," + app.globalData.longitude;
				uni.hideLoading();
				const params = {
					page: 1,
					pageSize: 1,
					location: local,
					adCode: '440300000000',
					adType: 2,
					category:0,
					sort:1,//1.按距离排序 2.销量排序
					business:3,//1.精选 2.买单商家 3.免单商家 4.推荐商家
				}
				apiEsStoreList(params).then(res => {
					switch (res.code) {
						case 200:
							that.sendStore=res.data.data[0]
							break;
						default:
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							break;
					}
				})
			
			},
			// 送朋友
			sendFriend(id) {
				this.orderId=id
				this.friendModal = true
			},
			// 取消弹框
			cancelModal() {
				this.friendModal = false
			},
			// 确认送人弹框
			verifyModal() {

			},
			jumpSearch() {
				uni.navigateTo({
					url: '/pages/search/search?order=1',
				});
			},
			// 关闭弹窗
			closeModal() {
				this.modalFlag = false;
			},
			jumpPageC(id, isActive) {
				if (isActive) {
					uni.navigateTo({
						url: `/pageC/rechargeCode/rechargeCode?id=${id}`
					});
				} else {
					this.orderCouponId = id
					this.modalFlag = true;
				}
			},
			jumpPageD(id) {
				uni.navigateTo({
					url: `/pageD/billOrderDetail/billOrderDetail?id=${id}`
				});
			},
			activate() {
				uni.navigateTo({
					url: `/pageC/rechargeCode/rechargeCode?id=${this.orderCouponId}`
				});
				this.modalFlag = false;
			},
			linkPage(page, params = '', root = 'pageB') {
				uni.navigateTo({
					url: `/${root}/${page}/${page}?orderId=` + params
				})
			},
			jumpDetil(id) {
				let that = this;
				// uni.navigateTo({
				// url: '../storeDetail/storeDetail?store_id=' + id,
				// });
				that.$navTo.navigateTo({
					id: 'Home-near-details',
					url: '../storeDetail/storeDetail?store_id=' + id,
					type: [2]
				})
			},
			navClick(index) {
				this.navIndex = index
				this.currentPage = 1;
				this.orderList = []
				this.isLastPage = false;

				app.globalData.orderType = index;

				if (index == 0) {
					this.goodsType = [4]
				} else if (index == 1) {
					this.goodsType = [5]
				} else if (index == 2) {
					this.goodsType = [-1]
					
				} else if (index == 3) {
					// this.goodsType=[6]
				}
				this.getList();
			},
			// 立即自用
			selfUse(id, index) {
				let data = {
					id: id,
					type: 1
				}
				productOrderuse(data).then(res => {
					console.log(res, "自用")
					if (res.code == 200) {
						this.orderList[index].status = 1
						uni.showToast({
							title: '自用成功',
							duration: 2000,
							icon: "none"
						});
						app.globalData.IndexType = 1;
						uni.switchTab({
							url:'/pages/index/index',
						})
					}
				})
			},
			getList() {
				let that = this;
				switch (that.navIndex) {
					case 3:
						let data = {
							page: that.currentPage,
							pageSize: that.pageSize,
						}
						getOrderWikeList(data).then(res => {
							if (that.currentPage == 1 && res.data.data.length <= 0) {
								that.orderList = [];
								return;
							}
							if (res.data.data.length > 0) {
								that.orderList = that.currentPage == 1 ? res.data.data.map(item => {
									return Object.assign({
										isDateType: item.isActive ? gongType.getTimertype(item
											.expireTime) : 1
									}, item)
								}) : that.orderList.concat(res
									.data.data.map(item => {
										return Object.assign({
											isDateType: item.isActive ? gongType.getTimertype(item
												.expireTime) : 1
										}, item)
									}));
								that.isLastPage = res.data.is_last_page;
								console.log(that.orderList, "that.orderListTow")
							}
						})
						break;
					case 4:
						let dataM = {
							page: that.currentPage,
							pageSize: that.pageSize,
						}
						getOrderuserList(dataM).then(res => {
							if (that.currentPage == 1 && res.data.data.length <= 0) {
								that.orderList = [];
								return;
							}
							if (res.data.data.length > 0) {
								that.orderList = that.currentPage == 1 ? res.data.data : that.orderList.concat(res
									.data.data);
								that.isLastPage = res.data.is_last_page;
							}
						})
						break;
					default:
						const tagParms = {
							page: that.currentPage,
							pageSize: that.pageSize,
							status: [1, 2, 3, 4], //1 支付未使用  2使用了  3退款  4评价完成
							goodsType: that.goodsType, // 4代表的代金券订单
						}
						orderGoodsList(tagParms).then(res => {
							if (that.currentPage == 1 && res.data.data.length <= 0) {
								that.orderList = [];
								return;
							}
							if (res.data.data.length > 0) {
								that.orderList = that.currentPage == 1 ? res.data.data : that.orderList.concat(res
									.data.data);
								that.isLastPage = res.data.is_last_page;
							}
							console.log(that.orderList, "that.orderList")
						})
						break;
				}

			},
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes) {
					that.mineInfo = lRes;
					uni.setStorageSync('mineInfo', lRes);
				})
			},
		}
	}
</script>
<style>
	page {
		background: #F4F6FA;
	}
</style>
<style lang="scss" sc>
	.order {
		width: 100%;
		padding-bottom: 230rpx;

		.title {
			padding: 0 20rpx;
			background: #fff;
			height: 100rpx;
			// display: flex;
			// align-items: center;
			display: -webkit-box;
			overflow-x: auto;
			line-height: 100rpx;

			position: fixed;
			top: 0;
			background: #fff;
			z-index: 99;

			.item {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-right: 50rpx;
			}

			.item_active {
				color: #F43B00;
				font-weight: 400;
				font-size: 28rpx;
				margin-right: 50rpx;
			}
		}

		.title::-webkit-scrollbar {
			display: none;
		}

		.content {
			margin: 20rpx 20rpx 0;
			padding-top: 100rpx;

			.item {
				width: 100%;
				// height: 272rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				margin-bottom: 20rpx;

				.item_box {
					padding: 28rpx 20rpx 26rpx;

					.item_top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}

						.right {
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
						}
					}

					.item_bottom {
						display: flex;
						margin-top: 12rpx;

						.left {
							width: 200rpx;
							height: 160rpx;
							border-radius: 32rpx;
						}

						.right {
							padding-left: 20rpx;
							padding-top: 6rpx;
							display: flex;
							flex-direction: column;
							flex: 1;
							position: relative;

							.view1 {
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
								padding-bottom: 4rpx;
							}
.btnck {
								width: 136rpx;
								height: 56rpx;
								border: 1rpx solid #F43B00;
								background: #fff;
								border-radius: 200rpx;
								font-style: normal;
								font-weight: 400;
								font-size: 24rpx;
								color: #F43B00;
								display: flex;
								align-items: center;
								justify-content: center;
								position: absolute;
								right: 156rpx;
								bottom: 0;
							}
							.btn {
								border: 1rpx solid #F43B00;
								width: 136rpx;
								height: 56rpx;
								background: #F43B00;
								border-radius: 200rpx;
								font-style: normal;
								font-weight: 400;
								font-size: 24rpx;
								color: #FFFFFF;
								display: flex;
								align-items: center;
								justify-content: center;
								position: absolute;
								right: 0;
								bottom: 0;
							}
						}
					}

					.item_foot {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						margin-top: 12rpx;

						view {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 148rpx;
							height: 56rpx;
							font-size: 26rpx;
							border-radius: 28rpx;
							font-weight: 400;
							margin-right: 20rpx;
						}

						.btn1 {
							border: 1rpx solid #F43B00;
							color: rgba(244, 59, 0, 1);
						}

						.btn2 {
							background: #F43B00;
							color: #FFFFFF;
							border: 1rpx solid #F43B00;
						}

						.btn3 {
							background: #F43B00;
							color: #FFFFFF;
							margin-right: 0;
							border: 1rpx solid #F43B00;
						}
					}
				}
			}

			.isBottom {
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				width: 100%;
				text-align: center;
			}

			.item_kong {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-top: 100rpx;

				.kong_img {
					width: 228rpx;
					height: 228rpx;
					border-radius: 50%;
				}

				.kong_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					width: 440rpx;
					text-align: center;
					margin-top: 20rpx;
				}
			}
		}

		.bottom {
			margin: 20rpx 20rpx 0;
			padding-top: 100rpx;

			.item {
				overflow: hidden;
				padding: 24rpx 25rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;
				position: relative;

				.item_left {
					width: 162rpx;
					height: 162rpx;
					border-radius: 20rpx;
				}

				.item_right {
					display: flex;
					flex-direction: column;
					padding-left: 26rpx;

					.view1 {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.view2 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						padding: 8rpx 0 5rpx;
					}

					.view3 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.dw {
					position: absolute;
					right: 24rpx;
					bottom: 24rpx;
					width: 155rpx;
					height: 46rpx;
					background: #F43B00;
					border-radius: 23rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					z-index: 5;
				}

				.dw_bj {
					position: absolute;
					right: -17rpx;
					top: -19rpx;
					width: 169rpx;
					height: 169rpx;
					z-index: 3;
				}
			}

			.item_kong {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				padding: 20rpx 0 30rpx;
			}
		}
	}

	.filterAll {
		filter: grayscale(100%);
	}

	// 弹窗
	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;

		background-color: rgba(0, 0, 0, 0.65);

		.rank-modal {
			width: 600rpx;
			padding-bottom: 48rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.closePoster {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				bottom: -80rpx;
				left: 50%;
				margin-left: -24rpx;
			}

			.rank-top {
				width: 600rpx;
				height: 200rpx;
				display: block;
			}

			.rank-de {
				padding: 30rpx 30rpx 0 30rpx;
				display: flex;
				font-size: 22rpx;
				color: #999999;

				view:nth-child(1) {
					margin-right: 58rpx;
				}

				view:nth-child(2) {
					margin-right: 150rpx;
				}

				view:nth-child(3) {
					margin-right: 50rpx;
				}
			}

			.rank-list {
				padding: 36rpx 30rpx;

				.rank-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 20rpx;

					.rank-no {
						font-size: 24rpx;
						color: #FA6400;
					}

					.rank-count {
						width: 50rpx;
					}

					.rank-save {
						width: 100rpx;
						text-align: center;
					}

					.rank-nick {
						display: flex;
						align-items: center;
						width: 220rpx;
						// margin: 0 60rpx 0 60rpx;

						image {
							width: 68rpx;
							height: 68rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						text {
							flex: 1;
						}
					}
				}

				.rank-item:last-child {
					margin-bottom: 0;
				}
			}
		}

		.friendModal_box {
			width: 662rpx;
			height: 700rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -331rpx;

			.top {
				margin: 0 30rpx;
				padding-top: 30rpx;
				width: 602rpx;
				height: 558rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.bot {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 30rpx;
				padding-top: 33rpx;

				.bot_left {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.bot_right {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #F43B00;
				}
			}

			.fot {
				position: absolute;
				height: 80rpx;
				bottom: -140rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.btn1 {
					width: 250rpx;
					height: 78rpx;
					background: #F0F0F0;
					border-radius: 39rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn2 {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 250rpx;
					height: 78rpx;
					background: #F43B00;
					border-radius: 39rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					position: relative;
					
					.btn_sha {
						width: 250rpx;
						height: 78rpx;
						border-radius: 28rpx 0px 0px 28rpx;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
						border: 1rpx solid red;
					}
				}
			}
		}

		.nomral-modal {
			text-align: center;
			width: 600rpx;
			padding-bottom: 48rpx;
			overflow: hidden;

			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.bg-top {
				width: 51%;
				height: 165rpx;
				background: #FA6400;
				top: 0;
				border-radius: 0 0 0% 80%;
				position: absolute;
				z-index: -1;
			}

			.left {
				left: 0;
			}

			.right {
				right: 0;
				border-radius: 0 0 80% 0% !important;
			}

			image {
				width: 170rpx;
				height: 170rpx;
				display: block;
				margin: 0 auto;
				margin-top: 54rpx;
				z-index: 1;
				margin-bottom: 14rpx;
			}

			.nomral-txt {
				width: 482rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
				line-height: 50rpx;
			}

			.modal-btn {
				background-color: #FA6400;
			}

			.nomral-title {
				font-size: 28rpx;
				color: #141414;
				line-height: 40rpx;
			}

			.nomral-vip {
				font-size: 38rpx;
				font-weight: bold;
				color: #141414;
				line-height: 54rpx;
			}

			.nomral-btn {
				margin: 0 auto;
				margin-top: 54rpx;
			}

			.nomral-tip {
				text-align: center;
				width: 424rpx;
				margin: 0 auto;
				font-size: 20rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 14rpx;
			}

			.modalBtnAll {
				margin: 54rpx 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btnLeft {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}

				.btnRight {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}
		}
	}
</style>
